<template>
  <div style="min-height:100%">
    <el-card shadow="always">
      <Carousel :recommends="recommends"></Carousel>
    </el-card>

    <el-row :gutter="20" :style="{marginTop: '20px'}">
      <el-col :span="8">
        <el-card class="left-card">
          <h3 class="newsTitle">防疫知识</h3>
          <div style="marginLeft:20px" v-for="(item,index) in remarks" :key="index" :name="index">
            <h5 style="margin:0px 0px">{{item.title}}</h5>
            <p style="fontSize:14px;margin:7px 0px">{{item.content}}</p>
            <el-divider v-if="index !== remarks.length - 1"></el-divider>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="right-card">
          <h3 class="newsTitle">最新资讯</h3>
          <el-timeline :reverse="reverse">
            <el-timeline-item v-for="(item,index) in timelines" :key="index" :timestamp="item.pubDateStr"
              placement="top">
              <el-card>
                <span>
                  <el-link :href="item.sourceUrl" target="blank">{{item.title}}</el-link>
                </span>
                <a :href="item.sourceUrl" class="mf20 detail pull-right" target="blank">详情<i
                    class="el-icon-d-arrow-right"></i></a>
                <p>{{item.summary}}</p>
                <p class="pull-right">————{{item.infoSource}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Carousel from '../components/Carousel';
import { axiosUtil } from '../network/axiosUtil.js'

export default {
  name: "Profile",
  data () {
    return {
      reverse: true,
      recommends: [],
      timelines: [],
      remarks: [],
    }
  },
  mounted () {
    this.getRecommends()
    this.getTimelines()
    this.getRemarks()
  },
  methods: {
    handleCurrentChange (cpage) {
      this.currentPage = cpage;
    },
    getRecommends () {
      axiosUtil({
        url: '/News/getRecommends',
        method: 'get'
      }).then(data => {
        if (data) {
          //代表请求数据成功
          this.recommends = data
        }
      })
    },
    getRemarks () {
      axiosUtil({
        url: '/News/getRemarks',
        method: 'get'
      }).then(data => {
        if (data) {
          //代表请求数据成功
          this.remarks = data
        }
      })
    },
    getTimelines () {
      axiosUtil({
        url: '/News/getTimelines',
        method: 'get'
      }).then(data => {
        if (data) {
          //代表请求数据成功
          this.timelines = data
        }
      })
    },
    toDetail (index) {
      window.open(this.timelines[index].sourceUrl)
      return false
    },
  },
  components: {
    Carousel
  }
}
</script>

<style scoped>
.card {
  position: relative;
  display: block;
}

.baseInfo {
  position: absolute;
  left: 140px;
  top: 20%;
}

.baseInfo > p:nth-child(1) {
  display: inline;
}

.detail {
  color: #00ccd9;
}

.left-card {
  min-height: 100%;
  height: 100%;
}

.newsTitle {
  margin-top: 0px;
}

.el-divider--horizontal {
  margin: 15px 0px;
}
</style>